<template>
<div id="main">
      <div id="" class="card">
        <div style="width: 100%; height: 50px ">
          <!--查询条件-->
          <el-form :inline="true" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
            <el-form-item label="仓库名称:">
              <el-input v-model="queryVo.stockName" placeholder="请输入仓库名称"></el-input>
            </el-form-item>
            <el-form-item label="仓库类型:">
                <el-select v-model="queryVo.stockType" >
                  <el-option
                      v-for="type in gatherType"
                      :label="type.gatherType"
                      :value="type.id"
                      :key="type.id">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-tiem>
              <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
            </el-form-tiem>
          </el-form>
        </div>
        <div>
          <el-button type="primary" plain @click="dialogVisible = true,stock={},add_display=true,upd_display=false">+新增</el-button>
          <div class="page">
            <el-button icon="el-icon-refresh" circle ></el-button>
          </div>
        </div>
        <!--数据表格-->
        <el-table
            :data="StockData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="编号"
              width="160">
          </el-table-column>
          <el-table-column
              prop="stockName"
              label="仓库名称"
              width="160">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-view" @click="getOne(scope.row.id)">{{scope.row.stockName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="stockType"
              label="仓库类型"
              width="160">
            <template slot-scope="scope">
                <span v-for="(item,index) in gatherType" :key="index">
                  <span v-if="scope.row.stockType==item.id">{{item.gatherType}}</span>
                </span>
            </template>
          </el-table-column>
          <el-table-column
              prop="maxAmount"
              label="库存报警上限"
              width="160">
          </el-table-column>
          <el-table-column
              prop="minAmount"
              label="库存报警下限"
              width="160">
          </el-table-column>
          <el-table-column
              prop="maxCapacityAmount"
              label="最大储存数"
              width="160">
          </el-table-column>
          <el-table-column
              prop="onOff"
              label="(启用/禁用)"
              width="160">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.onOff"
                    active-value="1"
                    inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="onOff(scope.row)">
                </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="22"
              label="操作"
              width="160">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="updStock(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页插件-->
        <div id="cell" class="page">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
<div id="details_dialog">
  <el-dialog
      title="仓库信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
    <el-form :model="stock" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="仓库名" prop="stockName">
        <el-input v-model="stock.stockName"></el-input>
      </el-form-item>
      <el-form-item label="最大储存量" prop="maxCapacityAmount">
        <el-input v-model="stock.maxCapacityAmount" >
        </el-input>
      </el-form-item>
      <el-form-item label="报警上限" prop="maxAmount">
        <el-input v-model="stock.maxAmount" >
        </el-input>
      </el-form-item>
      <el-form-item label="报警下限" prop="minAmount">
        <el-input v-model="stock.minAmount" >
        </el-input>
      </el-form-item>
      <el-form-item label="仓库类型" prop="stockType">
        <el-select v-model="stock.stockType" >
          <el-option
              v-for="type in gatherType"
              :label="type.gatherType"
              :value="type.id"
              :key="type.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="储存商品类型" prop="productTypeList">
        <el-cascader
            v-model="value"
            :options="options"
            :props="{label:'productTypeName',value:'id',children:'children',expandTrigger: 'hover'}"
            @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="stock.remark" >
        </el-input>
      </el-form-item>
      <el-form-item label="登记人"  prop="register">
        <el-input v-model="stock.register"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addStock" v-show="add_display">添加</el-button>
        <el-button type="primary" @click="updStock2" v-show="upd_display">修改</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
  </span>
  </el-dialog>
  <div  class="el-overlay" style="z-index: 2055;" v-show="details_div">
  <div aria-modal="true" aria-label="查看仓库" aria-describedby="el-id-6243-50" class="el-drawer rtl open" role="dialog" style="width: 450px;">
    <span class="el-drawer__sr-focus" tabindex="-1"></span>
    <header class="el-drawer__header">
      <span id="el-id-6243-51" role="heading" aria-level="2" class="el-drawer__title">查看仓库</span>
      <button aria-label="el.drawer.close" class="el-drawer__close-btn" type="button" @click="details_div=false">
        <i class="el-icon el-drawer__close">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
            <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
          </svg>
        </i>
      </button>
    </header>
    <div id="el-id-6243-50" class="el-drawer__body">
      <el-form ref="form"  label-width="80px">
        <el-form-item label="仓库名称">
          <el-input v-model="stock.stockName" disabled></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="stock.remark" disabled>
          </el-input>
        </el-form-item>
        <el-form-item label="仓库类型">
          <el-select v-model="stock.stockType" disabled>
            <el-option
                v-for="type in gatherType"
                :label="type.gatherType"
                :value="type.id"
                :key="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记人">
         <el-input v-model="stock.register" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  </div>
</div>
</div>
</template>

<script>
export default {
  name: "QueryAll",
  data() {
    return {
      //添加按钮的显示属性
      add_display:false,
      //修改按钮显示属性
      upd_display:false,
      details_div:false,
      //弹窗参数
      dialogVisible: false,
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
      // 仓库类型
      type: [],
      //商品类型选择框绑定值
      value: [],
      options: [],
      activeIndex: '2',
      // 查询条件
      queryVo: {
        stockType: "",
        stockName: ""
      },
      //仓库数据
      StockData: [],
      //回显侧边栏数据
      stock:{},
      //仓库类型
      gatherType: [],
      //商品类型
      productType:[],
      rules: {
        stockName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
        ],
        maxCapacityAmount: [
          { required: true, message: '请输入最大储存', trigger: 'blur' }
        ],
        maxAmount: [
          { required: true, message: '清输入库存报警上限', trigger: 'blur' }
        ],
        minAmount: [
          { required: true, message: '请输入库存报警下限', trigger: 'blur' }
        ],
        stockType: [
          { required: true, message: '请选择一个仓库类型', trigger: 'change' }
        ],
        productType: [
          { required: true, message: '请选择一个商品类型', trigger: 'change' }
        ],
        register: [
          { required: true, message: '请输入登记人', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.selGather()
    this.option()
    this.query()
  },
  methods: {
    //获取当前时间
    nowDate() {
      let getTime = new Date().getTime();
      let time = new Date(getTime);
      let year = time.getFullYear();//年
      let month = (time.getMonth() + 1).toString().padStart(2, '0');
      let date = time.getDate().toString().padStart(2, '0');
      let hour = time.getHours().toString().padStart(2, '0');
      let minute = time.getMinutes().toString().padStart(2, '0');
      let second = time.getSeconds().toString().padStart(2, '0');
      return (
          year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      )
    },
    //弹窗关闭判断方法
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    //查询所有仓库列表
    async query() {
      const {data: res} = await this.$http.post
      (`/stock/list/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.StockData = res.list
      this.total = res.total
      console.log(res)
    },
    //根据id查询仓库
    async getOne(id){
      this.details_div=true
      const {data : res}=await this.$http.post
      (`/stock/getOne/${id}`)
      this.stock=res
    },
    //查询所有仓库类型
    async selGather(){
      const {data : res}=await this.$http.post
      (`/gatherType/list`)
      this.gatherType=res
      console.log(res)
    },
    //主页下拉搜索框
    async option(){
      const {data: res} =  await this.$http.post('/productType/getProType')
      // for(let i =0;i<res.size;i++){
      this.options=res
      // }
      console.log(res)
    },
    handleChange(value) {
      console.log(value);
    },
    async updStock(id){
      this.dialogVisible=true
      this.upd_display=true
      this.add_display=false
      const {data : res}=await this.$http.post
      (`/stock/getOne/${id}`)
      this.stock=res
    },
    async updStock2(){
      this.dialogVisible=false
      const {data : res}=await this.$http.post
      (`/stock/updStock`,this.stock)
      if(res){
        this.$message({
          message: '操作成功！已经修改',
          type: 'success'
        })
        this.query()
      }
    },
    async addStock(){
      this.dialogVisible=false
      this.stock.registerTime=this.nowDate()
      console.log(this.stock)
      const {data : res}=await this.$http.post
      (`/stock/addStock`,this.stock)
      if(res){
        this.$message({
          message: '操作成功！需要审核',
          type: 'success'
        })
        this.query()
      }
    },
    async onOff(data){
      console.log(data.onOff)
      const {data : res}=await this.$http.post
      (`/stock/updStock`,data)
    }
  }
}
</script>

<style >
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.el-drawer .el-drawer__header span {
  font-size: 17px;
  line-height: 17px;
  color: black !important;
}
.el-drawer .el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}
</style>